<template>
	<view class="">
		<!-- 微信添加-->
		<uni-popup class="" ref="wechatPopup" background-color="#f5f6f6" :mask-click="false">
			<view class="popup-content">
				<text class="yunke-wechat" @click="yunkeWcRecordFn">
					<uni-icons type="chatboxes-filled" class="icon-wei" size="30"></uni-icons> 云客微信聊天记录
				</text>
				<text class="yunke-wechat" @click="yunkeFn">
					<uni-icons type="staff-filled" class="icon-wei" size="30"></uni-icons> 云客微信添加
				</text>
				<view class="yunke-wechat">
					<view>
						<uni-icons type="auth-filled" class="icon-wei" size="30"></uni-icons>企业微信添加
					</view>
					<view class="qy-btns">
						<text class="qiye-code" @click="createCode">生成</text>
						<text class="qiye-code" @click="copyCode">复制</text>
					</view>
				</view>
				<button type="primary" class="cancel-btn" @click="cancelPopup">取消</button>
			</view>
		</uni-popup>
		<uni-popup ref="showWechat" background-color="#fff" :mask-click="false">
			<!-- 基础用法，不包含校验规则 -->
			<view class="dialog-wechat">
				<view class="toshop_title">
					绑定微信号
					<uni-icons class="closed-icon" type="clear" size="30" @click="wechatcancel()"></uni-icons>
				</view>
				<uni-forms class="formbase" ref="baseForm" :model="baseFormData" label-width="75">
					<uni-forms-item label="客户手机号">
						<uni-easyinput v-model="detail.mobile" disabled placeholder="添加好友时的验证信息" />
					</uni-forms-item>
					<uni-forms-item label="验证信息" required>
						<uni-easyinput v-model="baseFormData.msg" placeholder="添加好友时的验证信息" />
					</uni-forms-item>
					<uni-forms-item label="备注" required>
						<uni-easyinput v-model="baseFormData.remark" placeholder="添加好友成功后，设置的备注信息" />
					</uni-forms-item>
				</uni-forms>
				<view class="center_bottom">
					<text @click="wechatconfirm()">确定</text>
				</view>
			</view>
		</uni-popup>
		<wechatUserPop ref="wechatUserPop"></wechatUserPop>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import dictionary from '@/utils/dictionary.js';
	import sun from '@/utils/sun.js';
	import wechatUserPop from './wechatUserPop.vue';
	const baseFormData = {
		msg: '',
		remark: "",
		mobile: ''

	}
	export default {
		name: "ykrecord",
		components: {
			wechatUserPop
		},
		data() {
			return {
				baseFormData: Object.assign({}, baseFormData), // 搜索条件
				staffList: [],
				info: {

				},
				current: 0,
				detail: {},
				options: {},
				friend_info: {}
			};
		},

		beforeMount() {
			this.dictionary = dictionary;
		},
		watch: {

		},
		onLoad(options) {

		},
		onReachBottom() {


		},
		methods: {
			showwechatNavPop(detail, options, friend_info) {
				this.detail = detail;
				this.options = options;
				this.friend_info = friend_info
				this.$refs.wechatPopup.open('bottom')
				this.baseFormData.remark = ''

			},
			//关闭微xintianjia
			cancelPopup() {
				this.$refs.wechatPopup.close()
			},
			yunkeFn() {
				this.$refs.showWechat.open('center');
				this.getWechatInfo()
			},
			wechatcancel() {
				this.$refs.showWechat.close()
				this.baseFormData.msg = '';
				this.baseFormData.remark = ''

			},
			wechatconfirm() {
				let _this = this;
				if (_this.baseFormData.msg == '') {
					uni.showToast({
						icon: 'none',
						title: '添加好友时的验证信息不能为空'
					});
					return false;
				}
				if (_this.baseFormData.remark == '') {
					uni.showToast({
						icon: 'none',
						title: '备注不能为空'
					});
					return false;
				}
				let url = '/api/customer.member/addYunKeTask';
				let params = {
					member_id: _this.detail.id,
					msg: _this.baseFormData.msg,
					remark: _this.baseFormData.remark
				};
				sun.request({
					url: url,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
							_this.$refs.showWechat.close();
							_this.$refs.wechatPopup.close();
							_this.$emit('checkWeChatStatus', _this.options.member_id)
						} else {
							this.$refs.showWechat.open('center');
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			// 获取是否当前微信绑定信息
			getWechatInfo() {
				let that = this;
				sun.request({
					url: '/api/customer.member/getWechatVerifyMessage',
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							that.baseFormData.msg = res.options.verify_message
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			//复制企业
			copyCode() {
				let _this = this;
				uni.setClipboardData({
					data: _this.copyContent,
					success: function() {
						uni.showToast({
							title: '已复制，去企业微信添加好友',
							duration: 2000,
							icon: 'none',
						});
					}
				});
			},

			//生成企业微信
			createCode() {
				let _this = this;
				_this.copyContent = '';
				sun.request({
					url: '/h5/customer.customer/qwecahtMobile',
					token: true,
					data: {
						id: _this.options.id,
					},
					success(res) {
						if (res.code == 200) {
							console.log(res)
							_this.copyContent = res.data.hashcode;
							uni.showToast({
								title: '内容已生成',
								duration: 2000,
								icon: 'none',
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			//云客微信聊天记录
			yunkeWcRecordFn() {
				this.$refs['wechatUserPop'].showUserPop(this.friend_info)
			},
			//拿到员工id
			getUserid(friend_id) {
				let _this = this;
				let url = '/api/customer.member/memberWechatList';
				let params = {
					friend_id: friend_id,
				};
				sun.request({
					url: url,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							let data = res.data;
							_this.staffList = data.staff;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			//员工聊天页面
			staffWechatLogFn(row, index) {
				console.log(row)
				let wxId = row.wx_id
				this.current = index;
				uni.navigateTo({
					url: '/pages/customer/ykRecord/ykRecord?friendId=' + this.info.wechat_id + '&wxId=' + wxId
				});
			},
			backUserPopup() {
				this.$refs.wechatUserPopup.close();
			},
		}
	};
</script>

<style lang="less" scoped>
	.dialog-wechat {
		position: relative;
		margin: 0 auto;
		text-align: center;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 20px;
		width: 98%;

		.toshop_title {
			width: 100%;
			padding: 15px 0;
			box-sizing: border-box;
			text-align: center;
			color: rgba(25, 25, 25, 1);
			font-size: 16px;
			background-color: #fbfbfb;

			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			position: relative;

			.closed-icon {
				position: absolute;
				left: 10px;
				top: 12px;
			}

		}

		.formbase {
			padding: 20px;
			padding-bottom: 0;
		}

		.center_bottom {
			width: 100%;
			height: 99upx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin-bottom: 20px;

			text:first-child {
				width: 194rpx;
				height: 54rpx;
				border: 1rpx solid rgba(64, 108, 235, 1);
				border-radius: 27rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(64, 108, 235, 1);
				line-height: 54upx;
			}

			text:last-child {
				width: 194rpx;
				height: 54rpx;
				border: 1rpx solid rgba(64, 108, 235, 1);
				border-radius: 27rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 54upx;
				background: rgba(64, 108, 235, 1);
			}
		}
	}

	.lookup,
	.qiye-code {
		padding-left: 12px;
		color: #1989fa;
		text-decoration: underline;
	}

	.qiye-code {
		padding-left: 25px;
	}

	.yunke-wechat {
		display: block;
		height: 78px;
		line-height: 78px;
		border-bottom: #fbfbfb solid 1px;
		text-align: left;
		background: white;
		position: relative;

		.icon-wei {
			vertical-align: -5px;
			margin: 0 20px;
		}

		.qy-btns {
			position: absolute;
			right: 10px;
			top: 0;

			&:nth-of-type(1) {
				margin-right: 20px;
			}
		}
	}

	.cancel-btn {
		width: 100%;
		height: 60px;
		line-height: 60px;
		background: white;
		color: rgba(25, 25, 25, 1);
		border: none;
		border-radius: 0;
		margin-top: 10px;

		&:after {
			border: none;
		}
	}

	/deep/.uni-popup .uni-popup__wrapper {
		border-radius: 20px !important;
		width: 100%;
		height: 40%;
		margin: 0 auto;
	}
</style>
